<template>
  <div>
    <div id="chartPieBox" style="width: 100%;height: 400px" />
  </div>
</template>

<script>
const { getUserRoleCountData } = require('@/api/userrole')
export default {
  name: 'PieCharts',
  props: {
    requestFlag: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {
      dataSource: {}, // Echart数据集合 用于Excel表格
      option: {
        title: {
          text: '角色用户注册数量分布图',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          data: [], // 数据列别名- 需要与数据列name保持一致
          left: 'center',
          top: 'bottom',
          orient: 'horizontal'
        },
        series: [
          {
            name: '角色用户数',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            data: [], // 数据源
            animationEasing: 'cubicInOut',
            animationDuration: 2600,
            label: {
              emphasis: {
                show: true,
                position: 'right',
                offset: [30, 40],
                formatter: '{b} : {c} ({d}%)',
                textStyle: {
                  color: '#333',
                  fontSize: 18
                }
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.getDatas()
  },
  methods: {
    getDatas() {
      console.log(this.requestFlag)
      if (this.requestFlag) {
        this.getUserRoleDataHandle()
      }
    },
    // 发送请求
    async getUserRoleDataHandle() {
      const res = await getUserRoleCountData()
      const headers = res.data.respOutMsgHeader
      const datas = res.data.main
      console.log(res)
      // 设置参数
      if (headers.respCode === 200) {
        const dataArray = []
        const dataLengendNameArray = []
        for (const data of datas) {
          const dataMapsObj = {
            value: data.roleUserCount, // 统计值
            name: data.roleName // 统计对应名称
          }
          const lengendName = data.roleName // 统计对应名称}
          dataLengendNameArray.push(lengendName)
          dataArray.push(dataMapsObj)
        }
        console.log(dataLengendNameArray)
        console.log(dataArray)
        // 设置pie图series数据源
        this.option.title.subtext = '数据统计时间：' + headers.respTime
        this.option.legend.data = dataLengendNameArray
        this.option.series[0].data = dataArray
        // 更新并渲染dom数据
        this.chartChange()
      }
    },
    chartChange() {
      const myEcharts = this.$echarts.init(document.getElementById('chartPieBox'), 'vintge')
      // 使用刚刚指定的配置项和数据显示图表
      myEcharts.setOption(this.option, true)
    }
  }
}
</script>

<style scoped>

</style>
